<!--
* description: 备件选择
* author:xuliwen
* createdDate:2021-2-3
-->
<template>
  <el-dialog
    v-dialogDrag
    :visible="popupsVisible"
    width="70%"
    :append-to-body="true"
    :close-on-click-modal="false"
    @close="closeEdit"
  >
    <dialogHeader slot="title" :title="titleName" :style-type="$store.state.app.dialogType" />
      <!-- 显示按钮的onetabel -->
      <one-table-template
        ref="multipleTable"
        :dynamic-buttons="tableButtons"
        :dynamic-components="tableComponents"
        :dynamic-api-config="apiConfig"
        :dynamic-table-cols="tableCols"
        :dynamic-form-fields="formField"
        :dynamic-is-show-more-btn="false"
        :callback-obj="callbackObj"
      />
  </el-dialog>
</template>

<script>
import { oneTableWithViewTemplateMixins } from '@/components/mixins/oneTableWithViewTemplateMixins'
import dialogHeader from '@/components/dialogHeader'
import OneTableTemplate from '@/components/templates/oneTable'
import api from '@/api/se/apiBaseData'
export default {
  components: {
    dialogHeader,
    OneTableTemplate,
  },
  // 组件混入对象
  mixins: [oneTableWithViewTemplateMixins],
  props: {
    popupsVisible: {
      type: Boolean,
      default: false
    },
    dataForForm: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    // 页面标识（与上面beforeRouteEnter中的对应）
    const viewPageCode = this.$route.path
    // 绑定事件配置化事件
    this.$ConfigCache.CacheConfig.bindEvent(this, [viewPageCode])
    return {
      selectiondata: [],
      editPopupsVisible:false,
      titleName: '备件选择',
      // 标题
      textMap: {
        edit: "备件编辑",
        add: "备件新增",
      },
       // 网格查询API配置对象
      apiConfig: api.queryNoReturnAccessories,
      // 动态组件-按钮
      tableButtons: [
        {
          compKey: "btnKey1",
          type: "primary",
          size: "small",
          name: "search",
          clickEvent: () => this.queryTable(1),
          text: this.$t("sys.button.query") /* 保存*/,
          position: "right",
        },
        {
          compKey: "btnKey2",
          type: "",
          size: "small",
          icon: "iconfont  icon-cancel",
          clickEvent: () => this.choosePart(),
          text: "选择", // 取消
        },
        {
          compKey: "btnKey2",
          type: "",
          size: "small",
          name: "reset",
          clickEvent: () => this.reset(),
          text: this.$t("sys.button.reset"),
          position: "right", // 重置
        },
      ],
      // 动态组件-查询条件
      tableComponents:
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode] &&
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode].formComponents
          .length > 0
          ? this.$ConfigCache.CacheConfig.cacheData[viewPageCode].formComponents
          : [
              {
                compKey: "compKey1",
                labelName: "备件编码：",
                codeField: "partNo",
                component: () => import("@/components/org/commonInput"),
                type: "inputText",
                span: 8,
                isMust: true,
              },
              {
                compKey: "compKey2",
                labelName: "备件名称：",
                codeField: "partName",
                component: () => import("@/components/org/commonInput"),
                type: "inputText",
                span: 8,
                isMust: true,
              },
            ],
       // 动态生成网格列
      tableCols:
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path] &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path].tableCols &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path].tableCols
          .length > 0
          ? this.$ConfigCache.CacheConfig.cacheData[this.$route.path].tableCols
          : [
              {
                prop: "releaseId",
                label: "主键ID",
                hidden: true,
                alwaysHidden: true,
              },
              {
                prop: "updateControlId",
                label: "并发控制ID",
                hidden: true,
                alwaysHidden: true,
              },
              {
                prop: "bigAreaId",
                label: "大区ID",
                hidden: true,
                alwaysHidden: true,
              },
              {
                prop: "partNo",
                label: "备件编码",
              },
              {
                prop: "partName",
                label: "备件名称",
              },
            ],
       callbackObj: {
        onCheckSelectChange: (selection) => {
          this.selectiondata=selection
        },
      },
      formField: {
        partNo:'',
        partName:''
      }
    }
  },
 
  created() {
     this.$nextTick(() => {this.queryTable(1)})  
  },
  // watch: {
  //   popupsVisible(newValue, oldValue){
  //     debugger
  //     if(newValue){
  //       debugger
  //       console.log(newValue)
  //        this.$nextTick(() => {this.queryTable(1)}) 
  //     }
  //   },
  // },
  methods: {
    // 关闭弹窗
    closeEdit(type) {
      this.$emit('close', type)
    },
     // 选择保存
    choosePart() {
      const that = this
      const queryObj = {
        // 保存mutation
        type: 'mutation',
        // api配置
         apiConfig:api.qualitySpecialPartsInsert,
        // 条件/实体参数（变量），根据typeParam中的定义配置
        variables: that.selectiondata

      }
      // 转换了中台请求格式数据
      var paramD = this.$getParams(queryObj)
      // 调用中台API方法（可复用）
      this.$requestAPI(paramD).then(response => {
        if (response.result === '1') {
          this.$message({
            message: this.$t('sys.tips.esTip5') /* 保存成功*/,
            type: 'success',
            duration: 1000
          })
          this.popupsVisible = false
          this.$nextTick(() => {
            this.$parent.queryTable(1)
          })
        } else {
          // 保存失败
          this.$message({
            message:
              '保存失败:' + response.msg,
            type: 'warn',
            uration: 1000
          })
        }
        this.popupsVisible = false
      })
    },
    // queryform() {
      // var queryid = { orderId: this.dataForForm.saleOrderId }
      // // 先读取参数中的传输对象
      // const returnObj = {
      // // api配置
      //   apiConfig: orgApis.orderinvoicedetailsQuery,
        // 条件/实体参数（变量），根据typeParam中的定义配置
        // variables: queryid
      // }
      // 转换了中台请求格式数据
      // var paramD = this.$getParams(returnObj, null, this.dynamicApiStyle)
      // 调用中台API方法（可复用）
      // this.$requestAPI(paramD, this.dynamicApiStyle).then(response => {
      //   if (response.result === '0') {
      //     if (response.msg) {
      //       this.$message({
      //         message: response.msg,
      //         type: 'warn',
      //         uration: 2000
      //       })
      //     }
      //     return
      //   }
      //   // 返回json
      //   if (response.result === '1') {
      //     Object.assign(this.formField, response.rows[0], response.rows[1])
      //     console.log(this.formField)
      //   }
      // }).catch(err => {
      //   console.info(err)
      // })
    // }
  }
}
</script>
<style lang='scss' scoped>
  /deep/ .el-dialog{
    margin-top:5rem !important
  }
</style>
